<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>
        var id = getQuery("id");
        window.onload = function (){
            findGrade();
            findById();
        }
        function findGrade(){
            axios.get("/grade/findAll",null).then(e=>{
                var info = e.data;
                var str ="";
                str+=`<div style="display: flex">`
                for (var i=0;i<info.length;i++){
                    str+=`<input type='checkBox' name="gradeArray" style="margin-left: 5px" value="${info[i].id}">${info[i].name}`
                }
                $("gradeDiv").innerHTML = str;
            });
        }

        async function findById(){
            await axios.get("/role/findById",{

                params:{
                    id
                }
            }).then(e=>{
                var info = e.data;

                $("name").innerHTML =info.name;

                for (var i=0;i<info.gradeList.length;i++){

                    var obj= info.gradeList[i];
                    document.querySelector("#gradeList [name='gradeArray'][value='"+ obj.id +"']")
                        .checked = true;
                }
            })
        }

        function getItem(){
            var idArray = [];
            var boxList = document.querySelectorAll(
                "#gradeDiv [name='gradeArray']:checked"
            );
            for (var i=0;i<boxList.length;i++){
                idArray.push(boxList[i].value);
            }
            return idArray;
        }

        function update(){
            var params = new URLSearchParams();
            params.append("id",id);
            params.append("gradeArray",getItem());
            axios.post("/role/update",params).then(e=>{
                if (e.data =="ok"){
                    location.href="/role/role.html"
                }
            })
        }
    </script>


</head>
<body>
<h2>修改用户权限</h2>
角色名称：<span id="name"></span><br>
拥有权限：<div id="gradeDiv"></div><br>
<input type="button" value="修改" onclick="update()">
</body>
</html>